<html>
<head>
    <meta charset="utf-8">
    <script src="jquery-3.1.1.min.js"></script>
    <meta name="author" content="ykf">
    <title>订单详情</title>
    <style>
    body{
        background-color: #eee;
    }
        #d1{
            /*float: left;*/
            width: 200px;
            height: 200px;
            background-color: white;
            margin: 5px auto;
            padding-top: 20px;
            position: relative;
        }
        #d2{
            /*float: left;*/
            display: flex;
            align-items: center;
            justify-content: center;
        }
        span{
            width: 80px;
            height: 25px;
            border: 1px solid gray;
            display: flex;
            justify-content: center;
        }
        #d3{
            /*float: right;*/
            display: flex;
            align-items: center;
            /*justify-content: center;*/
        }
        li{
            list-style: none;
            width: 80px;
            height: 25px;
            border: 1px solid gray;
            display: flex;
            justify-content: center;
        }
        ul{
            display: none;
        }
        .display{
            display: none;
        }
        .u1{
            position: absolute;
            margin-top: 40px;
            margin-left: -22px;
            display: none;
        }
        .u2{
            position: absolute;
            /*margin-left: -40px;*/
            margin-top: 40px;
            margin-left: 60px;
            display: none;
        }
        p{
            margin: 100px 70px;
        }
    </style>
</head>
<body>
    <div id="d1">
        <div id="d2">
            <span class="s1">销售订单</span>
            <span class="s2">消费订单</span>
        </div>
        <div id="d3">
            <ul class="u1">
                <li class="l1">订单1</li>
                <li class="l2">订单2</li>
                <li class="l3">订单3</li>
            </ul>
            <ul class="u2">
                <li class="l4">消费1</li>
                <li class="l5">消费2</li>
                <li class="l6">消费3</li>
            </ul>
        </div>
        <p></p>
    </div>
</body>
<html>
<script>
    // $(document).ready(function(){
    //     $('.u1').toggleClass('display').siblings().removeClass('display');
    // });
    $('.s1').on('click',function(){
        $('.u1').css('display','block');
        $('.u2').css('display','none');
    })
    $('.s2').on('click',function(){
        $('.u2').css('display','block');
        $('.u1').css('display','none');
    })


    // -----------
    $('.l1').on('click',function(){
        $('.u2').css('display','none');
        $('p').html('订单1');
    })
    $('.l2').on('click',function(){
        $('.u2').css('display','none');
        $('p').html('订单2');
    })
    $('.l3').on('click',function(){
        $('.u2').css('display','none');
        $('p').html('订单3');
    })


    // -----------------
    $('.l4').on('click',function(){
        $('.u1').css('display','none');
        $('p').html('消费1');
    })
    $('.l5').on('click',function(){
        $('.u1').css('display','none');
        $('p').html('消费2');
    })
    $('.l6').on('click',function(){
        $('.u1').css('display','none');
        $('p').html('消费3');
    })

    // $(document).ready(function(){
    //     $('li').click(function(){
    //         $(this).toggleClass('display').removeClass('display');
    //         $(p).html(this);
    //     })
    // })

</script>